@import "./keyframes.css";

[data-scope="marquee"][data-part="root"] {
  width: 100%;
  max-width: 600px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;

  &[data-orientation="vertical"] {
    height: 400px;
  }

  &[data-orientation="horizontal"] {
    width: 100%;
    height: 120px;
  }

  &[data-paused] {
    &,
    * {
      animation-play-state: paused !important;
    }
  }
}

[data-scope="marquee"][data-part="content"] {
  animation-timing-function: linear;
  animation-duration: var(--marquee-duration);
  animation-delay: var(--marquee-delay);
  animation-iteration-count: var(--marquee-loop-count);

  &[data-side="start"],
  &[data-side="end"] {
    animation-name: marqueeX;
  }

  &[data-side="top"],
  &[data-side="bottom"] {
    animation-name: marqueeY;
  }

  &[data-reverse] {
    animation-direction: reverse;
  }

  @media (prefers-reduced-motion: reduce) {
    animation: none !important;
  }
}

[data-scope="marquee"][data-part="edge"] {
  /* Default size and gradient styles - users can override these */
  z-index: 10;

  &[data-side="start"] {
    width: 20%;
    background: linear-gradient(to right, white, transparent);

    &[dir="rtl"] {
      background: linear-gradient(to left, white, transparent);
    }
  }

  &[data-side="end"] {
    width: 20%;
    background: linear-gradient(to left, white, transparent);

    &[dir="rtl"] {
      background: linear-gradient(to right, white, transparent);
    }
  }

  &[data-side="top"] {
    height: 20%;
    background: linear-gradient(to bottom, white, transparent);
  }

  &[data-side="bottom"] {
    height: 20%;
    background: linear-gradient(to top, white, transparent);
  }
}

/* Demo-specific styles */
[data-scope="marquee"][data-part="item"] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
}

.marquee-logo {
  font-size: 32px;
  line-height: 1;
}

.marquee-name {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
}

.marquee .controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}
